<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        
    <el-container>
      <el-header>
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="['#00c2ff', '#000000']" />
            <div class="title">
              <span class="title-text">碧海环保厨余垃圾监管平台</span>
              <dv-decoration-6 class="dv-dec-6" :reverse="true" />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="['#00c2ff', '#000000']"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <!-- <span class="text">数据分析1</span> -->
              <dv-decoration-3 style="width: 300px; height: 50px" />

              <!-- <dv-decoration-10  class="dv-dec-10-s"/> -->
            </div>
            <div class="react-right ml-3">
              <!-- <span class="text">数据分析2</span> -->
              <dv-decoration-10 class="dv-dec-10-s" />
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right mr-3">
              <!-- <span class="text fw-b">vue-big-screen</span> -->
              <dv-decoration-10 class="dv-dec-10" />
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <!-- <span class="text"
                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
              > -->
              <h3 class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</h3>
            </div>
          </div>
        </div>
        
      </el-header>
      <el-main >
            <v-city></v-city>
      </el-main>
    </el-container>
      </div>
    </div>
  </div>
</template>

<script>
import { newMap } from '@/common/map/map.js'
import { optionWorkOnStandard } from '@/components/echart/bar.js'
import { collectionRate } from '@/components/echart/bar.js'
// import { incomingQuantity } from '@/components/echart/bar.js'
import { spotsNumbe } from '@/components/echart/bar.js'

import { optionBarContainBarAndRatio } from '@/components/echart/bar.js'
import city from '@/views/indexCarCity.vue'
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'
// import centerLeft1 from './centerLeft1'
// import centerLeft2 from './centerLeft2'
// import centerRight1 from './centerRight1'
// import centerRight2 from './centerRight2'
// import center from './center'
// import bottomLeft from './bottomLeft'
// import bottomRight from './bottomRight'
import * as echarts from 'echarts';
export default {
  mixins: [drawMixin],
  data () {
    return {
      radio1: '上海',
      form: {
        userName: 'dlhw',
        date: '2020-10',
        clientNo: '0000009',
        vehicleData: [{
          排队数: '0',
          车辆总数: '0',
          出动数: '0',
          出动率: '0',
        }],
      },
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {},
        VIcon_Installations: {},
        VText_Installations: {},
      },
      Data: {
        arrayForType_Rubbish: [],
        arrayCLCPolygonData: [],
        arrayCLCMarkerData: [],
        arrayZZZMarkerData: [],
        arrayNCDMarkerData: [],
        arrayXQCYMarkerData: [],
        arrayCYMarkerData: [],
      },
      isZoomChange: 'S',
      map: null,
      mapZoom: 16,
      timing: null,
      loading: false,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    }
  },
  components: {
    // centerLeft1,
    // centerLeft2,
    // centerRight1,
    // centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
    'v-city': city,
  },
  mounted () {
    // this.initWorkOnStandard_SS()
    // this.initWorkOnStandard_CX()
    // this.initWorkOnStandard_XS()
    // this.initWorkOnStandard_JS()
    this.initWorkOnStandard_ONE()
    this.initWorkOnStandard_FOUR()
    this.initWorkOnStandard_FIVE()
    this.initWorkOnStandard_SIX()
    this.initWorkOnStandard_EIGHT()

    this.initWorkRatioByCartype()
    this.timeFn()
    this.mapShow();
    this.selectChange();
    this.getVehicleInfo();
    this.getInfoList();
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    async mapShow () {
      // 百度地图API功能
      this.map = newMap();
      // 初始化地图,设置中心点坐标和地图级别
      this.map.centerAndZoom("天津市滨海新区", 10);
      this.map.setMapStyleV2({ styleId: "0ea9da99f69d56246d9910bfd0f7c26b" });

      //缩放屏幕
      const _this = this;
      this.map.addEventListener('zoomend', function (e) {
        // console.log("地图缩放至：" + this.getZoom() + "级");
        // var aa = e.target.getZoom();
        if (e.target.getZoom() > 12 && _this.isZoomChange === 'S') {
          _this.isZoomChange = 'B';
          for (var key in _this.MapV.textLayerDic) {
            _this.MapV.textLayerDic[key].show();
          }
          _this.drawMapV()
        }
        if (e.target.getZoom() <= 10 && _this.isZoomChange === 'B') {
          _this.isZoomChange = 'S';
          for (var key1 in _this.MapV.textLayerDic) {
            _this.MapV.textLayerDic[key1].hide();
          }
          _this.drawMapV()
        }
      });
      // var mapStyle={  style : "midnight" }
      // this.map.setMapStyle(mapStyle);
      // this.map.setBack;
      // 点击屏幕
      this.map.addEventListener("click", function (e) {
        console.log(e.point.lng);
      });
    },
    // 画MapV图层
    drawMapV () {
      var mapv = require("mapv");
      for (var key in this.MapV.dataSetDic) {
        this.MapV.dataSetDic[key].set([]);
      }
      //因为需要加载不同的图片，所以将车辆数据按车辆类型、是否在线分成不同数组this.Data.arrayForType_Veicle

      this.Data.arrayForType_Rubbish.forEach((arrayDataForSameIcon) => {
        //如果数据中无数据，退出循环,不然下方arrayDataForSameIcon[0].CARTYPE报错
        if (arrayDataForSameIcon.length == 0) {
          return;
        }

        const _self = this;

        let img = new Image();
        img.src = require("@/assets/img/MapMarker/003/" +
          arrayDataForSameIcon[0].CAR_TYPE +
          arrayDataForSameIcon[0].STATUS +
          this.isZoomChange +
          ".png");

        img.onload = function () {
          //循环加载同一张图片的车辆数据
          let arrayImage = arrayDataForSameIcon.map((v) => {
            v.geometry = {
              type: "Point",
              coordinates: [v.LONGITUDE, v.LATITUDE],
            };
            v.icon = img;
            v.text = v.LICENSE_PLATE;
            return v;
          });

          let key =
            arrayDataForSameIcon[0].CAR_TYPE + arrayDataForSameIcon[0].STATUS;
          if (
            Object.prototype.hasOwnProperty.call(_self.MapV.dataSetDic, key)
          ) {
            _self.MapV.dataSetDic[key].set(arrayImage);
          } else {
            let optionsICON = {
              draw: "icon",
              width: 55, // 规定图像的宽度
              height: 55, // 规定图像的高度
            };
            var optionsTEXT = {
              draw: "text",
              fillStyle: "rgba(255, 255, 255, 1)",
              size: 14,
              avoid: true, // 开启文本标注避让
              textBaseline: "middle",
              offset: {
                x: 0,
                y: 25,
              },
            };
            let dataSet = new mapv.DataSet(arrayImage);

            _self.MapV.dataSetDic[key] = dataSet;
            _self.MapV.iconLayerDic[key] = new mapv.baiduMapLayer(
              _self.map,
              dataSet,
              optionsICON
            );
            _self.MapV.textLayerDic[key] = new mapv.baiduMapLayer(
              _self.map,
              dataSet,
              optionsTEXT
            );
            for (var key1 in _self.MapV.textLayerDic) {
              _self.MapV.textLayerDic[key1].hide();
            }
          }
        };
      });
    },
    // 实时
    async getVehicleInfo () {
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetVehicleInfo?CLIENT_NO=00000";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      // this.form.vehicleData = [{"排队数":"3440","车辆总数":"0","出动数":"0","出动率":"50"}]
      this.form.vehicleData = data
    },
    // 昨日各类型餐饮单位收运数量及覆盖率格式
    async initWorkRatioByCartype () {
      // [{"GROUPNAME":null,"CAR_TYPE":"洗路车","ALLNUM":"93","CURRENTNUM":"57"},
      // {"GROUPNAME":null,"CAR_TYPE":"机扫车","ALLNUM":"27","CURRENTNUM":"17"},
      // {"GROUPNAME":null,"CAR_TYPE":"高压清洗车","ALLNUM":"41","CURRENTNUM":"12"},
      // {"GROUPNAME":null,"CAR_TYPE":"洒水车","ALLNUM":"55","CURRENTNUM":"16"},
      // {"GROUPNAME":null,"CAR_TYPE":"小型机扫车","ALLNUM":"25","CURRENTNUM":"5"},
      // {"GROUPNAME":null,"CAR_TYPE":"除雪车","ALLNUM":"6","CURRENTNUM":"2"},
      // {"GROUPNAME":null,"CAR_TYPE":"总计","ALLNUM":"247","CURRENTNUM":"104"}]
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkRatioByCartype'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionBarContainBarAndRatio(["覆盖率", "覆盖数", "总数"], {
        category: ["小区", "饭店", "企业"],
        // lineData: [300, 400, 600], barData: [276, 348, 336],
        // rateData: [92, 87, 56,]
      }));
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetPointWorkByTypeInfo?CLIENT_NO=00000";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data.rateData
        }, {
          data: data.barData
        }, {
          data: data.lineData
        }]

      });
    },
    // 昨日垃圾点位收运与未收运占比及数量
    async initWorkOnStandard_ONE () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_ONE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetPointWorkInfo?CLIENT_NO=00000"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          data: data.series
        },]
      });
    },
    // 昨日各区域餐饮单位进厂量占比及数量
    async initWorkOnStandard_FOUR () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_FOUR'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetClientWeightInfo?CLIENT_NO=00000"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data.series
        },]
      });
    },
    // 昨日作业率
    async initWorkOnStandard_FIVE () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_FIVE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetVehicleWInfo?CLIENT_NO=00000";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          data: data.series
        },]
      });
    },
    // 昨日泔水废油脂进厂量占比及数量
    async initWorkOnStandard_SIX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_SIX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=" + this.form.userName + "&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',机扫";
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetTypeWeightInfo?CLIENT_NO=00000"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data.series

        },]
      });
    },
    // 昨日各垃圾收运车辆收运点位数目
    async initWorkOnStandard_EIGHT () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_EIGHT'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetVehicleWorkInfo?CLIENT_NO=00000"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        // legend: {
        //   data: ['津C26292', '津C26292', '津C26292', '津C26292', '津C26292', '津C26292', '津C26292']
        // },
        xAxis: {
          data: data.xAxis
        },
        series: [{

          data: data.series
        }]
      });
    },
    // 自动查询
    selectChange () {
      // let timeId = null
      var that = this;
      this.timeID = setInterval(() => {
        that.getVehicleInfo();
        that.getInfoList();
      }, 600000);
    },
    // 获取车辆实时列表
    async getInfoList () {
      var url =
        "http://111.160.78.62:5565/CompanyapiDFLSapi/DFVehicle/GetVehicleCurrentInfoList?ClientNo=00000"
      //  +localStorage.getItem("CLIENT_NO");
      let { data } = await this.$Http.get(url);
      this.screenData(data);
    },
    // 筛选数据
    screenData (data) {
      var listGanShui = [],
        listFYOUZHI = [];
      var listGanShui_Offline = [],
        listFYOUZHI_Offline = [];
      data.forEach((item) => {
        if (item.STATUS === "0") {
          item.STATUSstr = "在线";
          switch (item.CAR_TYPE) {
            case "泔水车":
              {
                listGanShui.push(item);
              }
              break;
            case "废油脂车":
              {
                listFYOUZHI.push(item);
              }
              break;
          }
        } else {
          item.STATUSstr = "离线";
          switch (item.CAR_TYPE) {
            case "泔水车":
              {
                listGanShui_Offline.push(item);
              }
              break;
            case "废油脂车":
              {
                listFYOUZHI_Offline.push(item);
              }
              break;
          }
        }
      });

      this.Data.arrayForType_Rubbish = [
        listGanShui,
        listFYOUZHI,
        listGanShui_Offline,
        listFYOUZHI_Offline,
      ];
      this.drawMapV();
    },

    timeFn () {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false
        this.initC();
      }, 2000)
    },
    async initWorkOnStandard_SS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_SS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=" + this.form.userName + "&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',洒水";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          data: data.dataWork
        }, {
          data: data.dataNotWork
        }, {
          data: data.dataOnStandard
        }, {
          data: data.dataNotStandard
        }]
      });
    },
    async initWorkOnStandard_CX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_CX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=" + this.form.userName + "&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',冲洗";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          data: data.dataWork
        }, {
          data: data.dataNotWork
        }, {
          data: data.dataOnStandard
        }, {
          data: data.dataNotStandard
        }]
      });
    },
    async initWorkOnStandard_XS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_XS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=" + this.form.userName + "&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',洗扫";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          data: data.dataWork
        }, {
          data: data.dataNotWork
        }, {
          data: data.dataOnStandard
        }, {
          data: data.dataNotStandard
        }]
      });
    },
    async initWorkOnStandard_JS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_JS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=" + this.form.userName + "&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',机扫";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          data: data.dataWork
        }, {
          data: data.dataNotWork
        }, {
          data: data.dataOnStandard
        }, {
          data: data.dataNotStandard
        }]
      });
    },
  }
}
</script>

<style lang="scss">
// @import '../assets/scss/index.scss';
//下方区域的布局
// 底部数据
.bototm-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.title {
  padding-top: 10px;
  padding-left: 20px;
  .text {
    font-size: 15px;
  }
}
.title-text {
  font-family: 'SimHei';
  font-weight: bold;
}

.home {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
</style>
